<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    //拦截器，
    axios.interceptors.request.use(function (config) {
      // console.log("请求发出前，执行的方法")
      // Do something before request is sent
      const token = localStorage.getItem("token")
      config.headers.Authorization = `Bearer ${token}`
      return config;
    }, function (error) {
      // Do something with request error
      return Promise.reject(error);
    });

    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
      // console.log("请求成功后 ，第一个调用的方法")
      const {
        authorization
      } = response.headers
      authorization && localStorage.setItem("token", authorization)
      return response;
    }, function (error) {
      // console.log(error.response.status)
      if(error.response.status===401){
        localStorage.removeItem("token")
        location.href = "/login"
      }
      return Promise.reject(error);
    });
  </script>

</head>

<body>
  <h1>后台系统-用户管理业务
    <button id="exit">退出登录</button>
  </h1>
  <div>
    <div>用户名:<input id="username" /></div>
    <div>密码:<input type="password" id="password" /></div>
    <div>年龄:<input type="number" id="age" /></div>
    <div><button id="register">添加用户</button></div>
  </div>
  <hr>
  <div>
    <button id="update">更新用户</button>
    <button id="delete">删除用户</button>
  </div>
  <hr>

  <table border="1">
    <thead>
      <tr>
        <td>id</td>
        <td>用户名</td>
        <td>年龄</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    var register = document.querySelector("#register")
    var exit = document.querySelector("#exit")
    var update = document.querySelector("#update")
    var deletebutton = document.querySelector("#delete")
    var username = document.querySelector("#username")
    var password = document.querySelector("#password")
    var age = document.querySelector("#age")

    register.onclick = () => {
      console.log(username.value, password.value, age.value)

      axios.post("/api/user", {
        username: username.value,
        password: password.value,
        age: age.value
      }).then(res => {
        console.log(res.data)
      })
    }

    update.onclick = () => {

      axios.put("/api/user/6258dc3f33421325ae9c519f", {
        username: "修改的名字",
        password: "修改的密码",
        age: 1
      }).then(res => {
        console.log(res.data)
      })
    }

    deletebutton.onclick = () => {

      axios.delete("/api/user/6258dc3f33421325ae9c519f").then(res => {
        console.log(res.data)
      })
    }


    //获取列表
    axios.get("/api/user?page=1&limit=10").then(res => {
      res = res.data
      var tbody = document.querySelector("tbody")
      tbody.innerHTML = res.map(item => `
          <tr>
            <td>${item._id}</td>  
            <td>${item.username}</td>  
            <td>${item.age}</td>  
          </tr>
        `).join("")
    })

    exit.onclick = () => {
      localStorage.removeItem("token")
      location.href = "/login"
    }
  </script>
</body>

</html>